<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <title>Vue 双向数据绑定</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <H4>文本框</H4>
    <input type="text" v-model="textvalue">
    {{ textvalue }}

    <H4>文本框</H4>
    <textarea v-model="textareavalue"></textarea>
    {{ textareavalue }}

    <H4>复选框</H4>
    <label>java</label>
    <input type="checkbox" v-model="checkedList" value="java">
    <label>vue</label>
    <input type="checkbox" v-model="checkedList" value="vue">
    <label>mysql</label>
    <input type="checkbox" v-model="checkedList" value="mysql">
    {{ checkedList }}

    <H4>单选框</H4>
    <label>男</label>
    <input type="radio" v-model="radiovlue" value="男">
    <label>女</label>
    <input type="radio" v-model="radiovlue" value="女">
    {{ radiovlue }}

    <H4>下拉框</H4>
    <select v-model="selectvalue">
        <option value="" disabled>请选择</option>
        <option value="111">11</option>
        <option value="222">22</option>
        <option value="333">33</option>
    </select>
    {{ selectvalue }}

    <H4>下拉框多选</H4>
    <select v-model="selectvalues" multiple>
        <option value="111">11</option>
        <option value="222">22</option>
        <option value="333">33</option>
    </select>
    {{ selectvalues }}
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            textvalue:"",
            textareavalue:"",
            checkedList:[],
            radiovlue:"",
            selectvalue:"",
            selectvalues:[]
        }
    })
</script>
</body>
</html>
